<template>
	<view class="box">
		<view class="head">
		<!-- <view class="head-t">
			<image src="../../../static/icons/arr-l.png"></image>
			<view>乐居</view>
		</view> -->
		<view class="head-b">
			<view @tap="tabEvents(item.index,item)" class="head-item" v-for="item in list" :key="item.index">
				<view :class="{active:item.index==current}">{{item.name}}</view>
				<view class="icon" v-if="item.index==1||item.index==2">
					<uni-icons :color="item.currentInco=='up'?'red':''" type="arrowup" ></uni-icons>
					<uni-icons :color="item.currentInco=='down'?'red':''" type="arrowdown" ></uni-icons>
				</view>
			</view>
		</view>
	</view>
	<view class="content">
		<view class="content-c">
			<view class="list" v-for="item in findProduct" :key="item.id" @click="gogoods(item.id)">
				<view class="list-t">
					<image :src="item.pic"></image>
				</view>
				<view class="list-b">
					<view class="title">{{item.name}}</view>
					<view class="bottom">
						<view class="price">{{item.price}}元</view>
						<view class="cname">{{item.productCategoryName}}</view>
					</view>				
				</view>
			</view>
		</view>
		<view class="content-b">
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
	</view>
	
</template>

<script>
	import {findProductList} from "../../../api/home/section/index.js";
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				//排序默认下标为0
				current:0,
				//请求过来的数据
				findProduct:[],
				//开始页
				start:1,
				//请求几页
				limit:5,
				id:'',
				//升序降序: 0默认降序; 1 升序 ,
				isDesc:'',
				//排序的列,支持:price(价格),sale(销量),sort(排序)
				sortBy:'',
				//下拉加载
				status:"more",
				//判断是否是最后一页
				isLast:false,
				// 表头
				list:[
					{
						name:'新品',
						index:0,
					},
					{
						name:'销量',
						index:1,
						currentInco:"",//"" up down
					},
					{
						name:'价格',
						index:2,
						currentInco:""
					},
					{
						name:'筛选',
						index:3,
					},
				]
			}
		},
		//监听下拉刷新页面(暂时没有实现下拉刷新)
		onPullDownRefresh(){
			this.init();
			uni.stopPullDownRefresh();
		},
		//页面滚动到底部事件
		onReachBottom(){
			if(this.isLast){
				
			}else{
				this.status="loading";
				this.init();
			}
		},
		methods:{
			//请求的页面
			init(){
				findProductList(this.start,this.limit,{
					categoryId:this.id,
					isDesc: this.isDesc,
					sortBy: this.sortBy,
				}).then(res=>{
					console.log(res)
					this.status="more"
					if(this.start*this.limit>=res.data.total){
						this.status="noMore" 
						this.isLast=true;
					}else{
						this.start+=1;
					}
					this.findProduct.push(...res.data.rows)
				})
			},
			//重置
			reset(){
				this.list.forEach((ele,index)=>{
					if(index==1||index==2){
						ele.currentInco=""
					}
				});
			},
			//跳转到goods页面
			gogoods(key){
				console.log(key)
				uni.navigateTo({
					url:`../goods/goods?id=${key}`,
				})
			},
			//控制表头的切换
			tabEvents(index,item){
				// console.log(index,item)
				if(index==this.current){
					
				}else{
					this.reset();
				}
							
				this.current=index;
				if(item.currentInco==''){
					item.currentInco="up"
				}else if(item.currentInco=="up"){
					item.currentInco="down"
				}else if(item.currentInco=="down"){
					item.currentInco="up"
				}
				//排序
				if(this.current==1){
					this.sortBy="sale"
				}else if(this.current==2){
					this.sortBy="price"
				}
				//价钱
				if(item.currentInco=="up"){
					this.isDesc=1;
				}else if(item.currentInco=="down"){
					this.isDesc=0;
				}
				this.init();
			},
			
		},
		onLoad(options){
			// console.log(options.id);
			this.id=options.id
			// console.log(uni.getStorageSync("id");	
			this.init();
			
		}
	}
</script>

<style lang="scss" scoped>
.box{
	// width: 100%;
	padding: 0 15px;
	overflow: hidden;
	background-color:#F1ECE7 ;
	.head{
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		height:40px;
		background-color:#354E44 ;
		margin-top: 44px;
		z-index: 99;
		.head-b{
			padding: 0 20px;
			height: 38px;
			margin-top: 2px;
			display: flex;
			justify-content: space-around;
			color: #fff;
			line-height: 38px;
			.head-item{
				display: flex;
				align-items: center;
				
				.icon{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top:-8px;
					height: 100%;
					margin-left: 5px;
					.uni-icons{
						height:30%;
					}
				}
			}
			.active{
				color: red;
			}

			
		}
	}
	.content{
		background-color:#F1ECE7 ;
		margin-top:100px;
		overflow: hidden;
		.content-c{
				width: 100%;
				
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				
				.list{
					width: 47%;
					height:209px;
					margin-bottom:15px;
					image{
						width: 100%;
						height:119px;
					}
					.list-b{
						// width:126px;
						// height:50px;
						padding:18px ;
						font-size: 13px;
						background-color: #fff;
						.title{
							width: 100%;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.bottom{
							margin-top: 10px;
							display: flex;
							justify-content: space-between;
						}
					}
				}
			}
	}
		.content-b{
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color:rgb(119, 119, 119) ;
		}
}
</style>
